import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LoginPage from '@/components/Login'
import About from '@/components/About'
import Recruit from '@/components/Recruit'
import Blog from '../pages/blog/Blog'
import Pageone from '../pages/blog/page1'
import Page2 from '../pages/blog/page2'
import View from '../pages/views/1.1/index'
// 引用页面模板->供路由使用
import index from '../pages/index.vue'
import pageQuiButton from '../pages/pageQuiButton.vue'
import pageQuiList from '../pages/pageQuiList.vue'
import pageQuiNav from '../pages/pageQuiNav.vue'

import model from '@/components/qui/quiModel'
import transition from '@/components/qui/quiTransition'
import plugin from '../pages/views/1.2/plugin.vue'
import plugin2 from '../pages/views/1.2/plugin_2.vue'
import directive from '../pages/views/1.2/directive.vue'
import directive1 from '../pages/views/1.2/directive-simple.vue'
import transitionAppear from '../pages/views/1.3/transitionAppear.vue'
import transitionMode from '../pages/views/1.3/transitionMode.vue'
import transitionStagger from '../pages/views/1.3/transitionStagger.vue'

// 引入nprogress进度条
// import NProgress from 'nprogress'
// //引入nprogress进度条的样式
// import 'nprogress/nprogress.css'
// 在打包过程中每一个组件都会打包成一个js文件，如果不使用使用/* webpackChunkName: "home" */
// 在打包的时候就会生成0.js,1.js等等，使用了之后就会打包成home.js
// 导入 Login 组件（注意，不要添加 .vue 后缀）
// 这是路由的异步加载，！important,这是优化项目必须的

// 引入home组件
// const Home = () => import(/* webpackChunkName: "home" */ '@/components/home')
// 引入登录组件
// const Login = () => import(/* webpackChunkName: "home" */ '@/components/login')
// 引入table组件
// const Table = () => import(/* webpackChunkName: "home" */ '@/components/table/table')
// //引入homeMain组件
// const HomeMain = () => import('@/components/HomeMain')

Vue.use(Router)

export default new Router({
  // mode: 'history',//开启了history模式，去除了#，
  // 在vue中，一般来说通过实例去访问某个属性的
  // vm.xxxx  vm.$set  vm.$refs  vm.$router
  routes: [
    // {
    //   path:'/',
    //   redirect:'/login'//路由的重定向
    // },

    {
      path: '/login',
      name: 'login',
      component: LoginPage
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    },

    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/recruit',
      name: 'recruit',
      component: Recruit
    },
    {
      path: '/blog',
      name: 'blog',
      component: Blog,
      children: [
        {
          path: 'page1',
          component: Pageone
        },
        {
          path: 'page2',
          component: Page2
        },
        {
          path: 'page3',
          component: Page2
        }
      ]
    },
    {
      path: '/view',
      name: 'view',
      component: View
    },
    {
      path: '/', // 首页
      name: 'index',
      component: index
    },
    {
      path: '/btn', // 按钮子页
      name: 'btn',
      component: pageQuiButton
    },
    {
      path: '/list', // 列表子页
      name: 'list',
      component: pageQuiList
    },
    {
      path: '/nav', // 导航子页
      name: 'nav',
      component: pageQuiNav
    },
    {
      path: '/model', // 列表子页
      name: 'model',
      component: model,
      children: [
        {
          path: 'trans',
          component: transition
        }
      ]
    },
    {
      path: '/plugin',
      name: 'plugin',
      component: plugin
    },
    {
      path: '/plugin2',
      name: 'plugin2',
      component: plugin2
    },
    {
      path: '/directive1',
      name: 'directive1',
      component: directive1
    },
    {
      path: '/directive',
      name: 'directive',
      component: directive
    },
    {
      path: '/transitionAppear',
      name: 'transitionAppear',
      component: transitionAppear
    },
    {
      path: '/transitionMode',
      name: 'transitionMode',
      component: transitionMode
    },
    {
      path: '/transitionStagger',
      name: 'transitionStagger',
      component: transitionStagger
    }

  ]
})
